<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Lytebox - Home</title>
		
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;charset=windows-1252" />
		<meta http-equiv="content-language" content="en" />
		
		<meta name="description" lang="en" content="Lytebox is an alternative to the Lightbox class that Lokesh Dhakar originally wrote. Lytebox was written as a self-contained object that eliminats the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as &quot;Slideshow&quot; support, &quot;Themes&quot; support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox." />
		<meta name="keywords" content="image preview, lytebox, litebox, lightbox, javascript, markus, hay, javascript image gallery, dhtml, slideshow, lyteshow, lyteframe, photography, graphics" />
		
		<link rel="shortcut icon" type="image/ico" href="Lytebox%20-%20Home_files/favicon0.ico" />
		<link rel="stylesheet" type="text/css" href="Lytebox%20-%20Home_files/styles00.css" media="screen" />
		
		<!-- Lytebox Includes //-->
		<script type="text/javascript" src="Lytebox%20-%20Home_files/lytebox0.js"></script>
		<link rel="stylesheet" type="text/css" href="Lytebox%20-%20Home_files/lytebox0.css" media="screen" />
		<!-- Lytebox Includes //-->
		
		<script type="text/javascript">
		function toggle(id, caller) {
			var el = document.getElementById(id).style;
			el.display = el.display == "none" ? "" : "none";
			
			// Changes the text to "READ LESS"
			caller.innerHTML = el.display == "none" ? "more info" : "less info";
		}
		/* Must pass in the "anchors" ID so that Lytebox can call the correct "onclick" handler... */
		var timeoutID = 0;
		function loadLytebox(id) {
			if (typeof myLytebox != 'undefined') {
				// if the myLytebox object exists, start it up!
				myLytebox.start(document.getElementById(id), false, true);
			} else {
				// wait 5/10th of a second and attempt loading again...
				if (timeoutID) { clearTimeout(timeoutID); }
				timeoutID = setTimeout('loadLytebox("'+id+'")', 500);
			}
		}
		</script>
		
		<!-- Custom styling for QuantumDigital advertisement. //-->
		<style type="text/css">
			.qdWrapper {
				background-color: #eeeeee;
				padding: 1px 2px 1px 2px;
				border: 1px dashed #bbbbbb;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<a href="http://www.dolem.com/lytebox/notice.htm" id="notice" rel="lyteframe" title="Lytebox Notice" rev="width: 620px; height: 500px;" style="display: none;"></a>
		<div id="main">
			<div style="text-align: left; float: left;"><img src="Lytebox%20-%20Home_files/lytebox_.png" alt="Lytebox logo" /></div>
			<!--
			<div style="text-align: right; float: right;">
				<span style="color: #bbb; font-weight: bold;">Home</span> | 
				<a href="demo.php">Demo</a> | 
				<a href="/forum">Message Board</a> |
				<a href="_contact.asp" rel="lyteframe" title="&lt;span style='color: #ff0000;'&gt;*&lt;/span&gt; = required field" rev="width: 440px; height: 400px; scrolling: no;">Contact</a>
			</div>
			//-->
			<div style="clear: both;"></div>
			<div style="text-align: left; float: left;">
				<b>Latest Version:</b> Lytebox v3.22<br />
				<b>Release Date:</b> October 2, 2007&nbsp;&nbsp;(<a href="http://www.dolem.com/lytebox/_history.htm" rel="lyteframe" title="Lytebox Changelog / Release History" rev="width: 620px; height: 500px; scrolling: auto;">Release History</a>)
			</div>
			<div class="qdWrapper" style="float: right; width: 380px;">
				Need flawless digital printing or mailed business/postcards with 1 day turnaround?
				Try <a href="http://quantumdigital.com/products?r=lytebox">QuantumDigital</a> today! Signing up is FREE!<br /><br />
				
				Visiting Thailand? Check out <b><a href="http://www.ourthaiguide.com/" target="_blank">www.OurThaiGuide.com</a></b> for a great selection of tour packages which come with a professional, English-speaking tour guide.
			</div>
			<div style="clear: both;"></div>

			<span class="title">Overview</span><hr />
			<p>Lytebox was written from the Lightbox class that Lokesh Dhakar (<a href="http://www.huddletogether.com/" target="_blank">http://www.huddletogether.com</a>) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as &quot;Slideshow&quot; support, &quot;Themes&quot; support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox. <!--These modifications were added as a result of user input, so if you feel you have a good idea for a new feature, then visit the <a href="http://www.dolem.com/forum/forumdisplay.php?fid=6" target="_blank">Lytebox Message Boards</a> and let it be known!//--></p>

			<p>For examples of the new and improved Lytebox in action, select an image from one of the following display types:</p>
			<div style="text-align: left; float: left; margin-left: 2em; width: 116px;">
				<strong>Single Image</strong><br />
				<a href="http://www.dolem.com/lytebox/misc/andromeda.jpg" rel="lytebox" title="Andromeda"><img src="Lytebox%20-%20Home_files/andromed.jpg" style="border: none;" alt="Andromeda" /></a>
			</div>
			<div style="text-align: left; float: left; width: 310px;">
				<strong>Grouped Images</strong><br />
				<a href="http://www.dolem.com/lytebox/misc/orion1.jpg" rel="lytebox[orion]" title="Orion Nebula #1"><img src="Lytebox%20-%20Home_files/orion1_t.jpg" style="border: none;" alt="Orion Nebula #1" /></a> 
				<a href="http://www.dolem.com/lytebox/misc/orion2.jpg" rel="lytebox[orion]" title="Orion Nebula #2"><img src="Lytebox%20-%20Home_files/orion2_t.jpg" style="border: none;" alt="Orion Nebula #2" /></a>
				<a href="http://www.dolem.com/lytebox/misc/orion3.jpg" rel="lytebox[orion]" title="Orion Nebula #3"><img src="Lytebox%20-%20Home_files/orion3_t.jpg" style="border: none;" alt="Orion Nebula #3" /></a>
			</div>
			<div style="text-align: left; float: left;">
				<strong>Slideshow (<span class="red">Lyteshow feature</span>)</strong><br />
				<a href="http://www.dolem.com/lytebox/misc/jupiter_io.jpg" rel="lyteshow[heavens]" title="Jupiter with one of its moons, Io"><img src="Lytebox%20-%20Home_files/jupiter_.jpg" style="border: none;" alt="Jupiter with one of its moons, Io" /></a> 
				<a href="http://www.dolem.com/lytebox/misc/milky_way.jpg" rel="lyteshow[heavens]" title="The Milky Way"><img src="Lytebox%20-%20Home_files/milky_wa.jpg" style="border: none;" alt="The Milky Way" /></a>
				<a href="http://www.dolem.com/lytebox/misc/pleiads.jpg" rel="lyteshow[heavens]" title="The Pleiades"><img src="Lytebox%20-%20Home_files/pleiads_.jpg" style="border: none;" alt="The Pleiades" /></a>
			</div>
			<div style="clear: both;"></div><br />
			<div style="text-align: left; left; margin-left: 2em; width: 240px; float: left;">
				<strong>HTML Content (<span class="red">Lyteframe feature</span>)</strong><br />
				<ol>
					<li><a href="http://www.solstation.com/x-objects/andromeda.htm" rel="lyteframe[group]" title="M31 - Andromeda Galaxy" rev="width: 740px; height: 380px;">M31 - Andromeda Galaxy</a></li>
					<li><a href="http://www.spacetelescope.org/news/html/heic0601.html" rel="lyteframe[group]" title="M42 - Orion Nebula" rev="width: 720px; height: 420px; border: 2px inset #663C46; scrolling: auto;">M42 - Orion Nebula</a></li>
				</ol>
			</div>
			<div style="text-align: left; left; width: 240px; float: left;">
				<strong>&nbsp;</strong><br />
				<ul>
					<li><a href="http://www.google.com/" rel="lyteframe" title="Search Google" rev="width: 640px; height: 380px; scrolling: auto;">Search Google!</a></li>
				</ul>
			</div>
			<div style="clear: both;"></div><br />

			<span class="title">How To Use</span><hr />
			<p><span class="step">Step 1:</span> <a href="http://www.dolem.com/lytebox/lytebox_v3.22.zip" class="download">Download Lytebox v3.22</a></p>
			<p><span class="step">Step 2:</span>&nbsp;&nbsp;Add the following lines to the <strong>&lt;head&gt;</strong> of your document:</p>
<pre>&lt;script type="text/javascript" language="javascript" src="lytebox.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" /&gt;</pre>

			<p><span class="step">Step 3:</span>&nbsp;&nbsp;Add the appropriate rel attribute for the type of display you want. See the examples below.<br /><br />
			&nbsp;&nbsp;&nbsp;&nbsp;<strong>Single Image Example:</strong></p>
<pre>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lytebox&quot; title=&quot;Image Description&quot;&gt;Image #1&lt;/a&gt;</pre>

			<p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Grouped Images Example:</strong></p>
<pre>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lytebox[vacation]&quot; title=&quot;Mom and Dad&quot;&gt;Mom and Dad&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lytebox[vacation]&quot; title=&quot;My Sister&quot;&gt;My Sister&lt;/a&gt;</pre>

			<p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Slideshow Example (<span class="red">note the use of lyteshow instead of lytebox</span>):</strong></p>
<pre>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lyteshow[vacation]&quot; title=&quot;Mom and Dad&quot;&gt;Mom and Dad&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lyteshow[vacation]&quot; title=&quot;My Sister&quot;&gt;My Sister&lt;/a&gt;</pre>

			<p>&nbsp;&nbsp;&nbsp;&nbsp;<strong>HTML Content Example (<span class="red">note the use of lyteframe instead of lytebox</span>):</strong></p>
<pre>&lt;a href=&quot;http://www.google.com&quot; rel=&quot;lyteframe&quot; title=&quot;Search Google&quot; 
   rev=&quot;width: 400px; height: 300px; scrolling: no;&quot;&gt;Google Search&lt;/a&gt;

&lt;a href=&quot;catalog1.htm&quot; rel=&quot;lyteframe[catalog]&quot; title=&quot;Summer Catalog&quot;&gt;Summer Catalog&lt;/a&gt;
&lt;a href=&quot;catalog1.htm&quot; rel=&quot;lyteframe[catalog]&quot; title=&quot;Winter Catalog&quot;&gt;Winter Catalog&lt;/a&gt;</pre>

			<p><b>Note:</b> When using the &quot;Lyteframe&quot; feature, the REV attribute is used to control the width, height, and scrolling of the window. If the REV attribute is omitted, then by default width/height is set to 400px and scrolling is set to auto. </p>
			<ul>
				<li class="custom configuration"><span class="red">Configuration:</span> For a complete list of configurable Lytebox options, click <a href="http://www.dolem.com/lytebox/_configurations.htm" rel="lyteframe" title="Lytebox Configuration" rev="width: 740px; height: 420px; scrolling: auto;">HERE</a>.</li>
				<li class="custom iframes"><span class="red">iFrames:</span> If you plan to use Lytebox in an iFrame environment, then you need to include <span class="code">lytebox.css</span> in the parent document, while including <span class="code">lytebox.js</span> in the iFrame document.</li>
				<li class="custom source"><span class="red">Source Code:</span> The JavaScript file (lytebox.js) that is included in the download has been stripped down (comments removed) for optimization purposes. The commented source code is available <a href="http://www.dolem.com/lytebox/lytebox_v3.22_source.zip">HERE</a>.</li>
				<!--<li class="custom support"><span class="red">Support:</span> Having problems with Lytebox? Visit the <a href="http://www.dolem.com/forum/forumdisplay.php?fid=6" target="_blank">Lytebox Message Boards</a> and find your answer. Be sure to read the <a href="http://www.dolem.com/forum/showthread.php?tid=61" target="_blank">FAQ</a> before posting, as it's likely that someone has already been there and done that.</li>//-->
			</ul><br />

			<span class="title">Browser Compatibility</span><hr />
			<p>While browser compatibility was in mind from the start, not all browsers were available for testing. These browsers include Safari, Netscape, and Linux-only 
			browsers such as Konquerer. The major browsers that were tested cover approximately 98% of browsers in use, so it's fairly safe to say that no major problems will arise.</p>
			
			<p>There is a "special" issue that is related to IE only. Sometimes the right side of the page will have a small area that is not overlayed. This is due to the way IE measures it's margins. Adding the following style to the page will fix this issue (but it will also affect the appearance of the entire page): <span class="code">body { margin: 0 auto; }</span></p>
			<p>The following browsers have been tested with this script:</p>
			<ul>
				<li class="custom ie"><strong>IE 5.01 SP2</strong> - The fade effect does not work, but the background is darkened (completely).</li>
				<li class="custom ie"><strong>IE 5.5 SP2</strong> - No known issues.</li>
				<!--<li class="custom ie"><strong>IE 6.0 SP2</strong> - Themes don't work properly without modifying lytebox.css. Read <a href="http://www.dolem.com/forum/showthread.php?tid=63" target="_blank">HERE</a> for more information.</li>//-->
				<li class="custom ie7"><strong>IE 7.0</strong> - No known issues.</li>
				<li class="custom opera"><strong>Opera 9.23</strong> - No known issues.</li>
				<li class="custom ff"><strong>Firefox 1.5+</strong> - No known issues, of course.</li>
			</ul><br />

			<span class="title">License</span><hr />
			<p>
			<!--Creative Commons License-->
			<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width: 0" src="Lytebox%20-%20Home_files/somerigh.png"/></a><br/>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>.
			<!--/Creative Commons License-->
			<!--
			<rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
				<Work rdf:about="">
					<license rdf:resource="http://creativecommons.org/licenses/by/3.0/" />
				<dc:title>Lytebox</dc:title>
				<dc:date>2006-2009</dc:date>
				<dc:description>
				Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminates the dependency of prototype.js, effects.js, and scriptaculous.js. Most of the core functionality and code was left in tact, and several functions were added to mimic the effects provided by sciptaculous. These newly added functions include: appear(), fade(), resizeW(), resizeH(), and toggleSelects(). Functions that were not needed were removed, as were global variables. Additionally, support has been added for iFrame environments without any code modifications needed by the end user (auto-detect).</dc:description>
				<dc:creator><Agent><dc:title>Markus F. Hay</dc:title></Agent></dc:creator>
				<dc:rights><Agent><dc:title>Markus F. Hay</dc:title></Agent></dc:rights>
				<dc:source rdf:resource="http://www.dolem.com/lytebox/lytebox.js" />
				</Work>
				<License rdf:about="http://creativecommons.org/licenses/by/3.0/"><permits rdf:resource="http://web.resource.org/cc/Reproduction"/><permits rdf:resource="http://web.resource.org/cc/Distribution"/><requires rdf:resource="http://web.resource.org/cc/Notice"/><requires rdf:resource="http://web.resource.org/cc/Attribution"/><permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/></License>
			</rdf:RDF>
			-->
			</p>
		</div>
		<div style="text-align: center;">Copyright &copy; 2003-2009, Markus F. Hay. All rights reserved.</div>
	</body>
</html>
<!-- This document saved from http://www.dolem.com/lytebox/index.htm -->
